<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script src="./js/jquery-1.12.4.js"></script>
    <style type="text/css">
        #LSWin,
        #SSWin {
            border: 1px solid black;
            background-color: white;
            height: 3.125rem;
        }
    </style>
    <script type="text/javascript">
        function writeLS() {
            // doucument.getElementById("username").value
            // 1.setItem
            // window.localStorage.setItem("username",username.value);
            // 2.数组
            // localStorage["username"]=username.value;
            //3.属性
            // localStorage.username=username.value;

            localStorage.username = username.value;
            localStorage.password = password.value;
            // doucument.getElementById("LSwin").innerHTML="数据保存成功"；
            $("#LSWin").html("数据已保存");
        }
        function readLS() {
            var str = "读到的用户名" + localStorage.username + "密码" + localStorage.password;
            $("#LSWin").html(str);
        }
        function clearLS() {
            localStorage.clear();
            $("#LSWin").html("数据已清除");
        }
        function writeSS() {
            sessionStorage.username = username.value;
            sessionStorage.password = password.value;
            $("#SSWin").html("数据已保存");
        }
        function readSS() {
            var str = "读到的用户名" + sessionStorage.username + "密码" + sessionStorage.password;
            $("#SSWin").html(str);
        }
        function clearSS() {
            sessionStorage.clear();
            $("#SSWin").html("数据已清除");
        }
    </script>
</head>

<body>
    <div id="app">
        <div id="" data-role="header">
            <h3>登录</h3>
        </div>
        <div id="" data-role="content">
            用户名：<input type="text" name="user" id="username" value="" />
            密码：<input type="password" name="pass" id="password" value="" />
            采用localStrage对象
            <p>
                <a href="#" data-role="button" onclick="writeLS()">存储</a>
                <a href="#" data-role="button" onclick="readLS()">读取</a>
                <a href="#" data-role="button" onclick="clearLS()">清空</a>

            </p>

            
            </div>
            <div id="LSWin"></div>
            采用sessionStorage对象
            <p>
                <a href="#" data-role="button" onclick="writeSS()">存储</a>
                <a href="#" data-role="button" onclick="readSS()">读取</a>
                <a href="#" data-role="button" onclick="clearSS()">清空</a>

            </p>
           
            <div id="SSWin"></div>
        </div>

    </div>
</body>

</html>